{% extends "../../base.html" %}

{% block crumbs %}
<div class="row">
    <div class="col-md-12">
        <ol class="breadcrumb">
            <li>
                <a href="/yqjr/index">主页</a>
            </li>
            <li class="active">
                <a class="this">基础信息</a>
            </li>
            <li class="active">
                <a class="this-page">接口管理</a>
            </li>
            <li class="active">
                <a class="">添加接口</a>
            </li>
        </ol>
    </div>
</div>
{% endblock %}

{% block body %}

<div class="row">
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">添加接口</h3>
            </div>
            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">接口名称</label>
                        <div class="col-sm-8">
                            <input type="text" id="if_name" name="if_name" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所属项目</label>
                        <div class="col-sm-8">
                            <select type="text" id="prj_id" class="form-control">
                                {% for prj in prj_list %}
                                <option value={{ prj.prj_id }}>{{ prj.prj_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">URL</label>
                        <div class="col-sm-8">
                            <input type="text" id="url" name="url" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">请求方式</label>
                        <div class="col-sm-1 control-label">
                            <label class="fancy-radio">
                                <input name="method" value="get" type="radio"><span><i></i>get</span>
                            </label>
                        </div>
                        <div class="col-sm-1 control-label">
                            <label class="fancy-radio">
                                <input name="method" value="post" type="radio"><span><i></i>post</span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">数据传输方式</label>
                        <div class="col-sm-8">
                            <select type="text" id="data_type" class="form-control">
                                <option value='json'>json</option>
                                <option value='data'>data</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">是否签名</label>
                        <div class="col-sm-1 control-label">
                            <label class="fancy-radio">
                                <input name="is_sign" value="1" type="radio"><span><i></i>签名</span>
                            </label>
                        </div>
                        <div class="col-sm-2 control-label">
                            <label class="fancy-radio">
                                <input name="is_sign" value="0" type="radio"><span><i></i>不签名</span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">接口描述</label>
                        <div class="col-sm-8">
                            <textarea name="description" placeholder="请输入内容" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">请求header</label>
                        <div class="col-sm-8">
                            <button id="add_request_header" class="btn btn-primary" type="button"><i
                                    class="fa fa-plus-square-o"></i>&nbsp;添加行
                            </button>
                        </div>
                        <div class="col-sm-offset-2 col-sm-8">
                            <table id="request_header" class="table col-sm-10" id="request_header_table">
                                <thead>
                                <tr>
                                    <th>头部标签</th>
                                    <th>备注</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">请求body</label>
                        <div class="col-sm-8">
                            <button id="add_request_body" class="btn btn-primary" type="button"><i
                                    class="fa fa-plus-square-o"></i>&nbsp;添加行
                            </button>
                        </div>
                        <div class="col-sm-offset-2 col-sm-8">
                            <table id="request_body" class="table col-sm-10">
                                <thead>
                                <tr>
                                    <th>参数名</th>
                                    <th>备注</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">返回header</label>
                        <div class="col-sm-8">
                            <button id="add_response_header" class="btn btn-outline btn-primary" type="button"><i
                                    class="fa fa-plus-square-o"></i>&nbsp;添加行
                            </button>
                        </div>
                        <div class="col-sm-offset-2 col-sm-8">
                            <table id="response_header" class="table col-sm-10">
                                <thead>
                                <tr>
                                    <th>头部标签</th>
                                    <th>备注</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">返回body</label>
                        <div class="col-sm-8">
                            <button id="add_response_body" class="btn btn-outline btn-primary" type="button"><i
                                    class="fa fa-plus-square-o"></i>&nbsp;添加行
                            </button>
                        </div>
                        <div class="col-sm-offset-2 col-sm-8">
                            <table id="response_body" class="table col-sm-10">
                                <thead>
                                <tr>
                                    <th>参数名</th>
                                    <th>备注</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-4 col-sm-6">
                            <button id="sumbit" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block javascript %}
<script>

    function del_step(obj) {
        var tr = obj.parentNode.parentNode;
        var tbody = tr.parentNode;
        tbody.removeChild(tr);
    }

    $(document).ready(function () {
        //添加请求头参数行
        $("#add_request_header").click(function () {
            var newRow = "<tr> <td name='var_name' contenteditable='true'></td><td name='var_remark' contenteditable='true'></td> <td> <button class='btn btn-danger' onclick='del_step(this)'>删除行</button> </td> </tr>";
            $("#request_header tr:last").after(newRow);
        });

        $("#add_request_body").click(function () {
            var newRow = "<tr> <td name='var_name' contenteditable='true'></td><td name='var_remark' contenteditable='true'></td> <td> <button class='btn btn-danger' onclick='del_step(this)'>删除行</button> </td> </tr>";
            $("#request_body tr:last").after(newRow);
        });

        $("#add_response_header").click(function () {
            var newRow = "<tr> <td name='var_name' contenteditable='true'></td><td name='var_remark' contenteditable='true'></td> <td> <button class='btn btn-danger' onclick='del_step(this)'>删除行</button> </td> </tr>";
            $("#response_header tr:last").after(newRow);
        });

        $("#add_response_body").click(function () {
            var newRow = "<tr> <td name='var_name' contenteditable='true'></td><td name='var_remark' contenteditable='true'></td> <td> <button class='btn btn-danger' onclick='del_step(this)'>删除行</button> </td> </tr>";
            $("#response_body tr:last").after(newRow);
        });

        //删除行
    });

    $('#get_table_data').click(function () {


        var args = {};
        $('#request_header tr').each(function (i) {                   // 遍历 tr
            if (i == 0) return true;
            var data = new Object();
            $(this).find("td[name]").each(function () {
                var name = $(this).attr("name");
                data[name] = $(this).text();
            });
            args[i] = data;
        });
        send_data = JSON.stringify(args);
        alert(send_data);
    });

    $('#sumbit').click(function () {

        var if_name = $("#if_name").val();
        var prj_id = $("#prj_id").val();
        var url = $("#url").val();
        var method = $("input[name='method']:checked").val();
        var data_type = $("#data_type").val();
        var is_sign = $("input[name='is_sign']:checked").val();
        var description = $("textarea[name='description']").val();

        var request_header_data;
        var request_body_data;
        var response_header_data;
        var response_body_data;

        var args = [];
        $('#request_header tr').each(function (i) {
            if (i == 0) return true;
            var data = new Object();
            $(this).find("td[name]").each(function () {
                var name = $(this).attr("name");
                data[name] = $(this).text();
            });
            args.push(data);
        });
        request_header_data = JSON.stringify(args);

        var args = [];
        $('#request_body tr').each(function (i) {
            if (i == 0) return true;
            var data = new Object();
            $(this).find("td[name]").each(function () {
                var name = $(this).attr("name");
                data[name] = $(this).text();
            });
            args.push(data);
        });
        request_body_data = JSON.stringify(args);

        var args = [];
        $('#request_header tr').each(function (i) {                   // 遍历 tr
            if (i == 0) return true;
            var data = new Object();
            $(this).find("td[name]").each(function () {
                var name = $(this).attr("name");
                data[name] = $(this).text();
            });
            args.push(data);
        });
        response_header_data = JSON.stringify(args);

        var args = [];
        $('#request_header tr').each(function (i) {                   // 遍历 tr
            if (i == 0) return true;
            var data = new Object();
            $(this).find("td[name]").each(function () {
                var name = $(this).attr("name");
                data[name] = $(this).text();
            });
            args.push(data);
        });
        response_body_data = JSON.stringify(args);

        $.ajax({
            url: "/base/interface_add/",
            type: "post",
            data: {
                "if_name": if_name,
                "prj_id": prj_id,
                "url": url,
                "method": method,
                "data_type": data_type,
                "is_sign": is_sign,
                "description": description,
                "request_header_data": request_header_data,
                "request_body_data": request_body_data,
                "response_header_data": response_header_data,
                "response_body_data": response_body_data,
            },
            // dataType: "json",

            success: function () {
                alert("保存成功");
                window.location.replace("/base/interface/");
            },
            error: function () {
                alert("error!");
            }
        });

    });

</script>
{% endblock %}